<template>
	<z-paging ref="paging" bg-color="#F6F6F6">
		<view class="d-m-t-20 bg d-p-l-30 d-p-r-30">
			<view class="u-border-bottom d-flex d-col-top d-p-t-40 d-p-b-40">
				<view class="d-label d-font-28">
					<text>姓名</text>
					<text class="d-red">*</text>
				</view>
				<view class="d-flex-1">
					<view><u-input v-model="form.member_name" border="none" placeholder="请输入姓名"></u-input></view>
					<view class="d-m-t-40">
						<u-radio-group v-model="form.member_sex" size="30rpx" label-size="36rpx">
							<view class="d-m-r-70"><u-radio label="男" name="男"></u-radio></view>
							<view><u-radio label="女" name="女"></u-radio></view>
						</u-radio-group>
					</view>
				</view>
				<view @click="upload"><u-avatar :src="form.member_photo" size="130rpx"></u-avatar></view>
			</view>
			<view class="u-border-bottom d-flex d-p-t-30 d-p-b-30">
				<view class="d-label d-font-28">
					<text>手机号码</text>
					<text class="d-red">*</text>
				</view>
				<view class="d-flex-1"><u-input type="number" maxlength="11" v-model="form.member_phone" placeholder="请输入手机号码" border="none"></u-input></view>
			</view>
			<view class="d-flex d-p-t-30 d-p-b-30">
				<view class="d-label d-font-28">
					<text>证件号码</text>
					<text class="d-red">*</text>
				</view>
				<view class="d-flex-1"><u-input v-model="form.member_idCard" placeholder="请输入证件号码" border="none"></u-input></view>
			</view>
		</view>
		<view class="d-m-t-20 bg d-p-l-30 d-p-r-30">
			<view class="d-flex d-p-t-30 d-p-b-30">
				<view class="d-label d-font-28"><text>备注</text></view>
				<view class="d-flex-1"><u-textarea v-model="form.member_memo" confirmType="done"></u-textarea></view>
			</view>
		</view>
		<template slot="bottom">
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20">
				<u-button
					type="primary"
					shape="circle"
					:custom-style="{
						height: '80rpx',
						fontSize: '30rpx',
						background: '#59A0FF'
					}"
					@click="submit"
				>
					保存
				</u-button>
			</view>
		</template>
	</z-paging>
</template>

<script>
import { upSave, mInfo, upImg } from '@/common/api';
export default {
	data() {
		return {
			form: {
				member_id: '',
				member_name: '',
				member_phone: '',
				member_sex: '男',
				member_photo: '1',
				member_memo: '',
				member_idCard: ''
			}
		};
	},
	onLoad(e) {
		if (e?.id) {
			this.form.member_id = e.id;
			uni.setNavigationBarTitle({
				title: '编辑好友'
			});
			mInfo({
				member_id: e.id
			}).then(res => {
				this.form = res;
			});
		} else {
			uni.setNavigationBarTitle({
				title: '添加好友'
			});
		}
	},
	methods: {
		upload() {
			uni.chooseImage({
				count: 1,
				success: e => {
					upImg({
						filePath: e.tempFilePaths[0],
						name: 'file'
					}).then(res => {
						this.form.member_photo = res;
					});
				},
				fail: () => {
					uni.$u.toast('请检测权限');
				}
			});
		},
		submit() {
			if (!this.form.member_name) {
				uni.$u.toast('请输入姓名');
				return;
			}
			if (!this.form.member_photo) {
				uni.$u.toast('请上传头像');
				return;
			}
			if (!this.form.member_phone) {
				uni.$u.toast('请输入手机号');
				return;
			}
			if (!uni.$u.test.mobile(this.form.member_phone)) {
				uni.$u.toast('请输入正确的手机号');
				return;
			}
			if (!this.form.member_idCard) {
				uni.$u.toast('请输入证件号码');
				return;
			}
			if (!uni.$u.test.idCard(this.form.member_idCard)) {
				uni.$u.toast('请输入正确的身份证号码');
				return;
			}

			upSave(this.form).then(res => {
				uni.$u.toast('保存成功');
				setTimeout(() => {
					uni.$u.route({ type: 'back' });
				}, 1000);
			});
		}
	}
};
</script>

<style lang="scss">
.bg {
	background-color: #fff;
}
.d-red {
	color: #ff0000;
}
.d-label {
	width: 190rpx;
}
</style>
